/**
 * 头部组件
 * @function useHeader
 * @Author: linzy
 * @Date: 2022-05-19
 * @param {Array<route>} routes - 面包屑的routes
 * @param {any[]} buttons - 按钮组
 * @property {object} route - 路由对象 [{path: xxx,name: xxx}]、二维数组格式 [[path,name],[path,name]]
 * @property {string} path - 路由地址
 * @property {string} name - 路由名称
 * @param {ReactDOM} [children] - 如果传入children则 按钮组不显示
 * @param {number} offsetTop=0 - 有按钮组，会默认悬浮，悬浮的高度
 * @param {object} [style] - 样式
 * @param {boolean} chain=true - 自动会把路由递增，不需要写完整的，如果路由设计不是递增的，那么传chain: false;
 * @param {string} title='' - 标题文案
 * @example
 * const routes = [["path", "name"]];
 * const buttons = [
 *   {
 *     text: "新建",
 *     onClick() {
 *       // btnClick('add')
 *     }
 *   }
 * ];
 * const [Header, headerProps] = useHeader({ routes, buttons });
 * <Header {...headerProps} />
 */
import React from "react";
import { Affix, Breadcrumb } from "antd";
import { useButtons } from "@/hooks";
import { typeOf } from "@/hooks/tools";
import styles from "./index.less";
import createHashHistory from "history/createHashHistory";
let myHistory = createHashHistory();
const Header = props => {
  const {
    routes = [],
    buttons = [],
    children,
    offsetTop = 0,
    style,
    chain = true,
    back = false,
    title = ""
  } = props;
  routes.forEach((item, index, list) => {
    if (typeOf(item) === "array") {
      list[index] = { path: item[0], breadcrumbName: item[1] };
    } else {
      item.name && (item.breadcrumbName = item.name);
    }
  });
  function Render() {
    if (chain) {
      routes.forEach((item, index, list) => {
        let i = index;
        let fullPath = "";
        while (i >= 0) {
          if (i === index) {
            fullPath = list[i].path;
          } else {
            var prePath = list[i].path.split("?")[0];
            if (/\/list$/.test(prePath)) {
              prePath = prePath.replace(/\/list$/, "");
            }
            fullPath = prePath + fullPath;
          }
          i--;
        }
        item.fullPath = fullPath;
      });
    }
    if (routes[0] && routes[0].path !== "/") {
      routes.unshift({
        path: "/",
        breadcrumbName: "首页"
      });
    }
    return (
      <Breadcrumb>
        {routes.map((item, index) => {
          return index === routes.length - 1 || item.path === "" ? (
            <Breadcrumb.Item>{item.breadcrumbName}</Breadcrumb.Item>
          ) : (
            <Breadcrumb.Item href={"#" + (item.fullPath ?? item.path)}>
              {item.breadcrumbName}
            </Breadcrumb.Item>
          );
        })}
      </Breadcrumb>
    );
  }
  if (back) {
    buttons.unshift({
      text: "返回",
      icon: "arrow-left",
      onClick: () => myHistory.go(-1)
    });
  }
  const buttonsRender = useButtons({ buttons });
  return (
    <>
      {children || buttons.length > 0 ? (
        <Affix offsetTop={offsetTop}>
          <header className={styles.dj_page_header} style={style}>
            <Render />
            <div style={styles.right}>
              {title}
              {children ? children : buttonsRender}
            </div>
          </header>
        </Affix>
      ) : (
        <header className={styles.dj_page_header} style={style}>
          <Render />
          <div style={styles.right}>
            {title}
            {children}
          </div>
        </header>
      )}
    </>
  );
};
export default props => {
  return [Header, props];
};
